<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test results</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
          crossorigin="anonymous"></script>
  <script type="text/javascript">
      $(function () {
          $.get('checkstyle-results.html', function (data) {
              $data = $(data);
              if ($data.find('module').length == 0) {
                  return false;
              }
              $data.find('module').addClass('block');
              $data.find('module > name').addClass('title module-title');
              $data.find('file').addClass('box');
              $data.find('file > name').addClass('subtitle').after('<headers class="columns is-marginless">' +
                  '<src class="column has-text-left">source</src>' +
                  '<message class="column has-text-left">message</message>' +
                  '</headers>');
              $data.find('error').addClass('columns is-marginless');
              $data.find('src,message').addClass('column has-text-left');
              $("#checkstyle_container").html($data);
          });
          $.get('results.html', function (data) {
              $data = $(data);
              $data.find('module').addClass('block');
              $data.find('module > name').addClass('title module-title');
              $data.find('testsuite').addClass('box');
              $data.find('testsuite > name').addClass('subtitle').after('<headers class="columns is-marginless">' +
                  '<tests class="column has-text-right">tests</tests>' +
                  '<errors class="column has-text-right">errors</errors>' +
                  '<failures class="column has-text-right">failures</failures>' +
                  '<skipped class="column has-text-right">skipped</skipped>' +
                  '<time class="column has-text-right">time</time>' +
                  '</headers>');
              $data.find('info').addClass('columns');
              $data.find('tests,errors,failures,skipped,time').addClass('column has-text-right');
              $data.find('testcase').has('failure').addClass('failure');
              $data.find('testcase').has('error').addClass('error');
              $data.find('type').addClass('box').before('<div>Type</div>');
              $data.find('text').addClass('box table-container').before('<div>Text</div>');
              $data.find('sysout').addClass('box table-container').before('<div>System output</div>');
              $data.find('syserr').addClass('box table-container').before('<div>System error</div>');
              $data.find('state').addClass('column is-narrow icon');
              $data.find('state').has('skipped').addClass('has-text-grey').html('<i class="fas fa-ban"></i>');
              $data.find('state').has('error,failure').addClass('has-text-danger').html('<i class="fas fa-exclamation-triangle"></i>');
              $data.find('state').has('success').addClass('has-text-success').html('<i class="fas fa-check-square"></i>');
              $data.find('testcase name').addClass('column');
              $data.find('testcase time').addClass('column is-narrow has-text-right');
              $("#container").html($data);
          });
          $("#container").on('click', 'testsuite > name', function () {
              $(this).parent().find('testcases').toggle();
          });
          $("#container").on('click', 'testcase.error info, testcase.failure info', function () {
              $(this).next('result').toggle();
          });
          $("#container").on('click', '.module-title', function () {
              $(this).next('testsuites').toggle();
          });
          $("#toggle_successful").click(function () {
              $("#container module:not(:has(testcase.error, testcase.failure)),#container testsuite:not(:has(testcase.error, testcase.failure))").toggle();
          });
      });
  </script>
  <style type="text/css">
    .module-title, testcase.error info, testcase.failure info, testsuite > name {
      cursor: pointer;
    }

    testcase result {
      display: none;
    }

    module, .module-title, testsuites, testcases, testcase, result, testsuite > name  {
      display: block;
    }

    text, sysout, syserr {
      white-space: pre;
    }
  </style>
</head>
<body>
<header class="hero is-primary is-bold">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Test and checkstyle results</h1>
    </div>
  </div>
</header>
<section class="section">
  <div class="container content">
    <h1 class="title">Checkstyle</h1>
    <hr class="hr"/>
    <div id="checkstyle_container">no issues</div>
  </div>
</section>
<section class="section">
  <div class="container content">
    <h1 class="title">Tests</h1>
    <button id="toggle_successful" class="button is-primary">Toggle successful executions</button>
    <hr class="hr"/>
    <div id="container"></div>
  </div>
</section>
</body>
</html>